<template>
    <div class="bookReadSetting">
        <div class="page" :style="Book.bookRead.colors[setup.bookRead.theme].page">
            <div class="content" :style="'font-size:' +  Book.bookRead.pageContent.fontSize + 'px;;line-height:' +  Book.bookRead.pageContent.lineHeight + 'px;letter-spcing:' +  Book.bookRead.pageContent.letterSpcing + 'px;'">
                <h2>第一章 阅读设置</h2>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;翻页方式翻页方式翻页方式翻页方式翻页方式翻页方式</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;翻页方式翻页方式翻页方式翻页方式翻页方式翻页方式</p>
            </div>
        </div>
        <van-cell is-link title="翻页方式" value="仿真" @click="actionShow = true"></van-cell>
        <van-cell is-link title="主题" @click="show = true">
            <template>
                <div class="cell-box">
                    <div :style="Book.bookRead.colors[setup.bookRead.theme].page"></div>
                </div>
            </template>
        </van-cell>
        <van-cell title="字体大小">
            <template>
                <van-stepper
                @change="savePageContent()"
                v-model="Book.bookRead.pageContent.fontSize"
                :min="Book.bookRead.pageContent.minFontSize"
                :max="Book.bookRead.pageContent.maxFontSize"/>
            </template>
        </van-cell>
        <van-cell title="行高">
            <template>
                <van-stepper
                @change="savePageContent()"
                v-model="Book.bookRead.pageContent.lineHeight"
                :min="Book.bookRead.pageContent.minLineHeight"
                :max="Book.bookRead.pageContent.maxLineHeight"/>
            </template>
        </van-cell>
        <!-- <van-cell title="字体间距">
            <template>
                <van-stepper
                @change="savePageContent()"
                v-model="Book.bookRead.pageContent.letterSpcing"
                :min="Book.bookRead.pageContent.minLetterSpcing"
                :max="Book.bookRead.pageContent.maxLetterSpcing"/>
            </template>
        </van-cell> -->

        <van-cell title="音量键翻页">
            <template>
                <van-switch
                active-color="#0f0"
                size="18px"
                @change="saveSetupBookRead()"
                v-model="setup.bookRead.volumeFlipping" />
            </template>
        </van-cell>

        <van-cell title="恢复默认设置" is-link @click="isMor"></van-cell>

        <van-popup v-model="show" position="bottom">
            <div class="box">
                <div 
                v-for="(item, index) in Book.bookRead.colors"
                :key="index"
                @click="xuanzhn(index)"
                :style="item.page"
                ></div>
            </div>
        </van-popup>

        <van-action-sheet cancel-text="取消" v-model="actionShow" :actions="actions" @select="onSelect" />

    </div>
</template>

<script>
    import { mapState, mapMutations } from 'vuex'
    export default {
        data() {
            return {
                value : 0,
                show : false,
                actionShow : false,
                actions : [
                    {
                        name : '仿真'
                    },
                ]
            }
        },
        computed : {
            ...mapState(['setup', 'Book'])
        },
        methods: {
            ...mapMutations(['savePageContent', 'delPageContent', 'saveSetupBookRead', 'delSetupBookRead']),

            xuanzhn(index){
                this.setup.bookRead.theme = index
                this.show = false
                this.saveSetupBookRead()
            },

            isMor(){
                this.$Dialog.confirm({
                    message: '确认要恢复默认阅读设置吗？',
                }).then(() => {
                    this.delPageContent()
                    this.delSetupBookRead()
                }).catch(()=>{})
            },

            onSelect({ name }){
                this.actionShow = false
            }
        },
    }
</script>

<style lang="less" scoped>
.bookReadSetting{
    width: 100%;
    .cell-box{
        width: 100%;
        display: flex;
        justify-content: right;
        &>div{
            height: 20px;
            box-sizing: border-box;
            border-radius: 50%;
            border: 1px solid #000;
            width: 20px;
        }
    }
    .page{
        padding: 10px;
        height: 200px;
        overflow: hidden;
    }
    .box{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        padding: 10px;
        &>div{
            width: 50px;
            height: 50px;
            margin: 5px;
            border-radius: 50%;
            border: 1px solid #000;
            box-sizing: border-box;
        }
    }
}
</style>